﻿<!DOCTYPE html>
<html>
<head>
	<title>A JsViews tree view control</title>
	<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
	<script src="../../jsrender.js" type="text/javascript"></script>
	<script src="../../jquery.observable.js" type="text/javascript"></script>
	<script src="../../jquery.views.js" type="text/javascript"></script>
	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
	<link href="../resources/tree.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="nav"><a href="../demos.html">JsViews Demos</a></div>

<h3>JsViews 'Tree' Tag Control: The {{tree}} tag</h3>
<div class="subhead">Dynamic content blocks use <em>visible{:...}</em> binding</div>

<div id="pageContent" class="folderView"></div>

<script id="pageTemplate" type="text/x-jsrender">
	<ul>{^{tree/}}</ul>
</script>

<script id="treeTemplate" type="text/x-jsrender">
	<li>
		{{if folders && folders.length}}
			<span class="toggle">{^{:expanded ? '-' : '+'}}</span>
		{{else}}
			<span class="spacer">></span>
		{{/if}}
		<span class="selectable" data-link="css-background-color{:~tag.selected ? 'yellow' : 'white'}">{{>name}}</span>
	</li>
	{{if folders}}
		<li data-link="visible{:~tag.expanded}">
			<ul>
				{{for folders}}
					{^{tree/}}
				{{/for}}
			</ul>
		</li>
	{{/if}}
</script>

<script type="text/javascript">

$.views.tags({
	tree: {
		toggle: function() {
			$.observable(this).setProperty("expanded", !this.expanded);
		},
		select: function() {
			$.observable(this).setProperty("selected", !this.selected);
		},
		onAfterLink: function() {
			var self = this;
			self.contents("li").first()
				.on( "click", ".toggle", function() {
					self.toggle();
				})
				.on( "click", ".selectable", function() {
					self.select();
				});
		},
		expanded: false, // default to unexpanded
		template: "#treeTemplate"
	}
});

/* Hierarchy of named folders */
var rootFolder = {
	name: "Categories", folders: [
		{ name: "Drama", folders: [
			{ name: "Courtroom" },
			{ name: "Political" }
		]},
		{ name: "Classic", folders: [
			{ name: "Musicals", folders: [
				{ name: "Jazz"},
				{ name: "R&B/Soul"}
			]}
		]}
	]};

var pageTmpl = $.templates("#pageTemplate");

$( "#pageContent").link(pageTmpl, rootFolder);

</script>
</body>
</html>
